<template lang="html">
<div class='register'>
      <el-form
        :model="registerForm"
        :rules="rule"
        ref="form"
        style="width:250px;margin:0 auto 0;">
        <el-form-item prop="username" style="margin-top: 20px;">
          <el-input type="text" v-model="registerForm.username" auto-complete="off" placeholder="请输入帐号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="registerForm.password" auto-complete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="password_c">
          <el-input type="password" v-model="registerForm.password_c" auto-complete="off" placeholder="请再次输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="captcha">
          <div style="text-align:left;">
            <el-input type="text" v-model="registerForm.captcha" auto-complete="off" placeholder="验证码" style="width:50%;"></el-input>
            <el-button
              type="primary"
              @click.native.prevent="handleGetCaptcha"
              :loading="loading"
              style="width:auto;position:absolute;right:0px;">
              获取验证码
            </el-button>
          </div>
        </el-form-item>
      </el-form>
</div>
</template>

<script>
import { post, common } from "../../api/api";

export default {
  data() {
    var passEqual = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请再次输入密码"));
      } else if (value != this.registerForm.password) {
        callback(new Error("两次密码不一致"));
      } else {
        callback();
      }
    };
    return {
      active: "register",
      loading: false,
      registerForm: {
        username: "",
        password: "",
        password_c: "",
        captcha: ""
      },
      rule: {
        username: [
          { required: true, message: "请输入账户", triggle: "blur" },
          {
            pattern: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$|^1[34578]\d{9}$/,
            message: "请输入正确的手机或邮箱",
            triggle: "blur"
          }
        ],
        password: [
          { required: true, message: "请输入密码", triggle: "blur" },
          { min: 6, max: 30, message: "必须6-30个字符", triggle: "blur" }
        ],
        password_c: [
          { min: 6, max: 30, message: "必须6-30个字符", triggle: "blur" },
          { validator: passEqual, triggle: "blur" }
        ],
        captcha: [
          { required: true, message: "请输入验证码", triggle: "blur" },
          { pattern: /^\d{6}$/, message: "请输入正确的验证码", triggle: "blur" }
        ]
      }
    };
  },
  methods: {
    handleGetCaptcha() {
      let url = "";
      let params = { username: this.registerForm.username };
      url = "/web/verify-captcha";
      this.loading = true;
      post(url, params).then(resdata => {
        let data = resdata;
        let error = function() {
          this.$message({
            message: resdata.msg,
            type: "error"
          });
        }.bind(this);
        let success = function() {
          this.$message({
            message: resdata.msg,
            type: "success"
          });
        }.bind(this);
        common()(error)(success)(resdata);
        this.loading = false;
      });
    },
    handleSubmit() {
      let params = {
        username: this.registerForm.username,
        password: this.registerForm.password,
        captcha: this.registerForm.captcha
      };
      this.$store.commit("set_auth_loading", true);
      post("/web/register", params).then(resdata => {
        let data = resdata;
        let error = function() {
          this.$message({
            message: resdata.msg,
            type: "error"
          });
        }.bind(this);
        let success = function() {
          this.$message({
            message: resdata.msg,
            type: "success"
          });
          this.$refs.form.resetFields();
        }.bind(this);
        common()(error)(success)(resdata);
        this.$store.commit("set_auth_loading", false);
      });
    }
  }
};
</script>

<style lang="scss">
.register {
    overflow: hidden;
  margin-top: 0px;
  .el-tabs__item {
    padding: 0 !important;
    width: 100px;
  }
  .el-tabs__active-bar {
    width: 100px !important;
  }
}
</style>
